<template class="task-template">
  <section id="app-sys-information-section" class="section js-section u-category-system">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-system"></use></svg>
          获取应用和系统信息
        </h1>
        <h3>使用几个 Node.js 和 Electron 模块, 您可以收集有关用户系统, 应用程序或屏幕的信息.</h3>
        <p>相关文档的链接位于下面的示例中.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="app-info-demo-toggle" class="js-container-target demo-toggle-button">获取应用信息
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="app-info">查看示例</button>
            <span class="demo-response" id="got-app-info"></span>
          </div>
          <p>主进程的 <code>app</code> 模块可用于获取应用程序在用户计算机上的位置.</p>
          <p>在这个示例中, 要从渲染器进程获取信息, 我们使用 <code>ipc</code> 模块向主进程发送一条消息, 来请求应用程序的路径.</p>
          <p>查看更多 <a href="http://electron.atom.io/docs/api/app">应用模块文档<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a>.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/system/app-information.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/system/app-information.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="app-version-demo-toggle" class="js-container-target demo-toggle-button">获取版本信息
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="version-info">查看示例</button>
            <span class="demo-response" id="got-version-info"></span>
          </div>
          <p><code>process</code> 模块内置在 Node.js 中（因此您可以在主进程和渲染器进程中使用此模块）, 而在 Electron 应用程序中, 此对象还有一些更有用的属性.</p>
          <p>下面的示例将获取应用程序正在使用的 Electron 版本.</p>
          <p>查看更多 <a href="http://electron.atom.io/docs/api/process">进程文档<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a>.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/system/version-information.js"></code></pre>

          <div class="demo-protip">
            <h2>高级技巧</h2>
            <strong>查找 Chromium, Node.js 和 V8 的版本.</strong>
            <p>Electron 还在 <code>process.versions</code> 对象中包括 Chromium, Node.js 和 V8 的版本. 您可以通过在 Electron 应用中打开开发人员工具并键入 <code>process.versions</code> 来快速查看.</p>
            <pre><code class="language-js">// 返回正在使用的 Chromium 版本
process.versions.chrome
// 返回正在使用的 V8 版本
process.versions.v8
// 返回正在使用的 Node 版本
process.versions.node</code></pre>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="sys-info-demo-toggle" class="js-container-target demo-toggle-button">获取系统信息
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="sys-info">查看示例</button>
            <span class="demo-response" id="got-sys-info"></span>
          </div>
          <p>Node.js 的 <code>os</code> 模块提供了有关用户操作系统的有效信息. 它内置在 Node.js 中, 可以在主进程和渲染器进程中使用.</p>
          <p>在下面的示例中, 我们通过模块返回主目录的位置.</p>

          <p>在浏览器中查看 <a href="https://nodejs.org/api/os.html">完整 os 文档<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a>.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/system/sys-information.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="screen-info-demo-toggle" class="js-container-target demo-toggle-button">获取屏幕信息
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="screen-info">查看示例</button>
            <span class="demo-response" id="got-screen-info"></span>
          </div>
          <p>Electron 的 <code>screen</code> 模块可以获取有关屏幕大小, 显示, 光标位置等信息. 在下面的示例中, 我们将获取所使用的显示器的尺寸.</p>

          <p>在浏览器中查看 <a href="http://electron.atom.io/docs/api/screen">完整 screen 文档<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a>.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/system/screen-information.js"></code></pre>

          <div class="demo-protip">
            <h2>高级技巧</h2>
            <strong>尺寸差异.</strong>
            <p>示例中的 <code>.size</code> 方法返回屏幕的原始尺寸, 但由于系统菜单栏, 这可能不是您的应用程序的实际可用空间.</p>

            <p>要获取可用屏幕空间的大小, 请使用 <code>.workAreaSize</code> 方法. 而使用 <code>.workArea</code> 方法将返回坐标以及可用屏幕空间的尺寸.</p>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/system/app-information')
      require('./renderer-process/system/version-information')
      require('./renderer-process/system/sys-information')
      require('./renderer-process/system/screen-information')
    </script>

  </section>
</template>
